<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue';
import NtmMetaDataEditor from './NtmMetaDataEditor.vue';
import { reactive, watch } from 'vue';
import { MetaData } from "../../types/MetaData"

const model = defineModel<MetaData[]>();
const deleteRow = (index: number) => {
    model.value?.splice(index, 1)
}
const appendRow = () => {
    const metadata = reactive({} as MetaData)

    if(!model.value) {
        model.value = []
    }

    model.value = [...model.value, metadata]
}

watch(model, (values) => {
    console.log(values)
}, {
    deep: true
})
</script>

<template>
    <ElTable :data="model">
        <ElTableColumn label="Transform">
            <template #default="scope: { row: MetaData }">
                <NtmMetaDataEditor :show-header="false" v-model="scope.row"></NtmMetaDataEditor>
            </template>
        </ElTableColumn>
        <ElTableColumn label="Operations" width="120">
            <template #default="scope: { $index: number }">
                <ElButton type="danger" :icon="Delete" @click="deleteRow(scope.$index)"></ElButton>
            </template>
        </ElTableColumn>
        <template #append>
            <ElButton style="width: 100%;" :icon="Plus" @click="appendRow">新增</ElButton>
        </template>
    </ElTable>
</template>